<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        [v-cloak] {
            display: none;
        }

        .title {
            border: 2px solid gold;
        }

        .p1 {
            text-decoration: underline;
        }

        .p11 {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>在做项目很多时候，有表单注册，用户留言，评论功能，需要收集用户的信息</h2>
    <h3>登录表单</h3>
    <form action="">
        <div>
            手机号码：<input type="text" v-model.trim="loginForm.phoneNumber">
            <!--v-on：事件类型，不需要前缀 click-->
            <!--@简化写法-->
            <button @click="getCodeClickHandler">点击获取验证码</button>
            <!--<button v-on:click="getCodeClickHandler">点击获取验证码</button>-->
        </div>
        <div>
            验证码：<input type="text" v-model.number="loginForm.code">
        </div>
        <div>
            <!--事件的回调函数：业务 + 事件类型 + Handler-->
            <!-- .stop 事件修饰符，阻止默认事件-->
            <!--https://cn.vuejs.org/v2/api/#v-on-->
            <!--简化程序猿没有技术含量的写法-->
            <button @click.prevent="submitHandler">登录</button>
        </div>
    </form>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            /*数据整体性*/
            loginForm: {
                phoneNumber: '',
                code: '',
            },
            /*其他的数据*/
        },
        methods: {
            /*见名知意*/
            getCodeClickHandler() {
                console.log('clickHandler', this.loginForm.phoneNumber);
            },
           /* submitHandler(event) {
                event.preventDefault(); // 阻止默认事件
                // event.stopPropagation(); // 阻止冒泡
                console.log('submitHandler', this.loginForm, event);
            }*/
            submitHandler() {
                console.log('submitHandler', this.loginForm);
            }
        }
    })
</script>

</html>
